// 首页搜索-商城
import React, { useEffect, useRef, useState } from 'react';
import { Button, Image, Input, Text, View } from '@tarojs/components';
import TitleBar from '@/src/components/titleBar';
import Taro from '@tarojs/taro';
import './index.less';
const recognitionResult = () => {
  const [paddingTop, setPaddingTop] = useState<number>();
  const [current, setCurrent] = useState(0);
  const [show, setShow] = useState(true); // 默认显示第一个div

  const [picNumber, setPicNumber] = useState(3);
  useEffect(() => {
    const sysInfo = Taro.getSystemInfoSync();
    let statusBarHeight: any = sysInfo.statusBarHeight;
    setPaddingTop(statusBarHeight + 44);
  }, []);
  const xueJias = [
    {
      id: 1,
      enName: 'Cohiba Siglo V',
      cnName: '高希霸 世纪 五',
      image:
        'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia2.png',
      related: true,
    },
    {
      id: 2,
      enName: 'Cohiba Siglo VI',
      cnName: '高希霸 世纪 六',
      image: 'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
      related: false,
    },
  ];
  const xueJiaContent = (
    title = 'Cohiba Siglo VI',
    subTitle = '高希霸 世纪 六',
    iconSrc = 'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
    showRelate = true
  ) => {
    console.log('====1', { src: { iconSrc } });
    return (
      <view className="xuejia-body">
        <view className="title-main">{title}</view>
        <view className="title-sub">{subTitle}</view>
        <Image className="xuejia-icon" src={iconSrc} />
        {showRelate && <view className="xuejia-relate">关联</view>}
      </view>
    );
  };
  return (
    <View className="recognitionResult" style={{ paddingTop: paddingTop }}>
      <TitleBar showLeftBack={true} title="识别结果"></TitleBar>
      {show ? (
        <View className="recognitionResult-all">
          {/* {xueJiaContent('Cohiba Siglo V', '高希霸 世纪 五', xuejia2, true)} */}
          {/* {xueJiaContent()} */}
          {xueJias.map((item) => (
            <View key={item.id}>
              {xueJiaContent(
                item.enName,
                item.cnName,
                item.image,
                item.related
              )}
            </View>
          ))}
        </View>
      ) : (
        <View className="recognitionResult-none">
          <View className="recognitionResult-none-content">
            <Image
              className="recognitionResult-none-icon"
              src="https://file.linkcook.cn/image/wineMiniProgram/search/searchNone.png"
            />
            <Text className="recognitionResult-none-text">
              抱歉，搜索无结果
            </Text>
          </View>
        </View>
      )}
      <View className="recognitionResult-search-none">
        <View className="recognitionResult-search-none-content">
          以上结果都不是
        </View>
      </View>
    </View>
  );
};

export default recognitionResult;
